<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>产品列表</title>
    <style>
        .product-list {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            padding: 20px;
        }
        .product-item {
            border: 1px solid #e5e5e5;
            border-radius: 5px;
            padding: 10px;
            width: 200px;
            text-align: center;
        }
        .product-item h3 {
            font-size: 1.2em;
            margin: 0 0 10px;
        }
        .product-item p {
            color: #555;
            margin: 5px 0;
        }
        .product-item button {
            background-color: #007bff;
            border: none;
            color: white;
            padding: 5px 10px;
            cursor: pointer;
        }
        .product-item button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body onload="fetchProducts()">
<div class="product-list" id="productsContainer"></div>

<script>
    async function fetchProducts() {
        const response = await fetch('/product/list');
        const data = await response.json();
        const products = data.list || [];

        const container = document.getElementById('productsContainer');
        products.forEach(product => {
            const productElement = document.createElement('div');
            productElement.classList.add('product-item');

            productElement.innerHTML = `
                <h3>${product.name}</h3>
                <p>价格：￥${product.price}</p>
                <p>简介：${product.introduce}</p>
                <button onclick="window.location.href='/productDetail.html?id=${product.id}'">详情</button>
            `;

            container.appendChild(productElement);
        });
    }
</script>
</body>
</html>